<template>
  <a_page>
    <a工具栏 :list="list" />
    <el-table ref="multipleTable" border tooltip-effect="dark" :data="单项组" @selection-change="list.选中变了"
      class="全高-工具栏-60 draggable" row-key="id" @sort-change="list.sortChange" :default-sort="a.默认排序" empty-text="空空如也~~">
      <el-table-column type="selection" width="40" />

      <el-table-column type="expand">
        <template #default="props">
          <!-- <q-btn push text-color="primary" label="新增子项" icon="add" @click="详情_抽屉式 ? 详情_抽屉式.初始化() : list.增()" dense/>
          <el-table :data="props.row.组件s" border table-layout="auto">
          </el-table> -->
          <a子表_父表内嵌 :父组件="组件" :父项="props.row" ref="子表ref" 标题="组件s" 字段名="组件s"></a子表_父表内嵌>
        </template>
      </el-table-column>

      <a列表字段 :组件="组件" :编辑否="true" />
      <!-- <template v-for="字段 in 组件.字段组" :key="字段.名称">
        <el-table-column align="left" :label="字段.名称" :prop="字段.名称" width="150">
          <template #default="{ row }">
            <a单字段输入 :字段="字段" :单项="row" />
            <template v-if="字段.名称.includes('图标')">
              <IconSelect v-model="row.图标"></IconSelect>
            </template>
            <template v-else>
              <el-input :disabled="row.disabled" v-model="row[字段.名称]" />
            </template>
          </template>
        </el-table-column>
      </template> -->

      <!-- <el-table-column align="left" label="id" prop="id" width="150">
      </el-table-column>
      <el-table-column align="left" label="名称" prop="名称" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model="row.名称" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="英文名" prop="英文名" width="120">
        <template #default="{ row }">
          <el-input :disabled="row.disabled" v-model="row.英文名" />
        </template>
      </el-table-column>
      <el-table-column align="left" label="图标" prop="图标" width="140">
        <template #default="{ row }">
          <IconSelect v-model="row.图标"></IconSelect>
        </template>
      </el-table-column> -->

      <!-- 末尾列 -->
      <el-table-column align="left" sortable label="修改时间" prop="UpdatedAt" width="180">
        <template #default="scope">{{ fmt时间(scope.row.UpdatedAt) }}</template>
      </el-table-column>
      <el-table-column align="left" label="操作" fixed="right">
        <template #default="scope">
          <el-button link icon="DocumentCopy" @click="详情.复制(scope.row)">复制</el-button>
          <el-button type="danger" link icon="delete" @click="list.删(scope.row)">删除</el-button>
          <el-button link icon="rank" class="cursor-grab"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="gva-pagination">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="req.page" :page-size="req.pageSize"
        :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面" @size-change="list.改单页条数" />
    </div>
  </a_page>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import { fmt时间 } from '@/utils'
import * as util from '@/utils'

const props = defineProps({
  url: String,
})
const cfg = {
  req: {
    pageSize: 20,
  },
  单项模板: {
    图标: 'sunrise'
  },
  提交前: (单项组) => {
    if (util.某对象等于某值否(单项组, '名称', '开发')) {
      return false
    }
    return true
  }
}

import use from '@/hooks/uselist';
const list = use(cfg)
const { 组件, a, 单项组, req } = list
import Sortable from 'sortablejs'

const rowDrop = () => {
  // 要拖拽元素的父容器
  const tbody = document.querySelector('.draggable tbody')
  Sortable.create(tbody, {
    //  可被拖拽的子元素
    draggable: '.draggable .el-table__row',
    handle: '.cursor-grab',
    onEnd: async ({ newIndex, oldIndex }) => {
      await nextTick()
      const currRow = 单项组.splice(oldIndex, 1)[0]
      单项组.splice(newIndex, 0, currRow)
    }
  })
}

onMounted(() => {
  rowDrop()
})

import a子表_父表内嵌 from './子表_父表内嵌.vue';
const 子表ref = ref()

// import use详情_抽屉式 from '@/hooks/use详情_抽屉式';
// const 详情 = use详情_抽屉式({ to详情页否: true })

</script>

<style lang="scss" scoped></style>
